<script lang="ts" setup>
import { chunkArray, getGamesImg } from "@/utils";
const props = withDefaults(
  defineProps<{
    title?: string;
    data?: any[];
    showMore?: boolean;
  }>(),
  {
    title: "",
    data: () => [],
    showMore: false
  }
);
defineOptions({
  name: "GameList",
});
const emits = defineEmits<{
  (e: "clickTitle"): void;
}>();
const chunkData = computed(() => {
  return chunkArray(props.data, 4);
});
const attrs = useAttrs();
const router = useRouter();

// const { play } = usePlay();
const jumpToDetail = (game: any) => {
  router.push(`/detail?id=${game.id}`);
  // play(game);
};
</script>
<template>
  <div class="w-344 mx-auto mb-16" v-bind="{ ...attrs }">
    <div v-if="title" class="font-600 text-16 color-[#000] h-17 lh-19 mb-15" @click="emits('clickTitle')">
      {{ title }}
      <img v-if="showMore" class="w-16 ml-2" src="@/assets/img/move_up.png" alt="" />
    </div>
    <div class="flex flex-col justify-start items-stretch gap-y-18">
      <div
        class="flex justify-start items-start gap-x-20"
        v-for="(arr, idx) in chunkData"
        :key="idx"
      >
        <div
          @click="jumpToDetail(it)"
          class="flex flex-col justify-start items-center gap-y-6"
          v-for="(it, idx) in arr"
          :key="idx"
        >
          <img
            class="w-71 h-71 rounded-10"
            :src="getGamesImg(it.pathPicture, '1')"
            alt=""
          />
          <p class="w-71 font-600 text-12 color-[#000] lh-14 text-center">{{ it.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
